<template>
  <div id="actual">
    <div class="one">
      <a-large-screen-group
        :LeftTitle="LeftTitle[0]"
        color="now1"
        :images="IconImg1"
        :grouplist="sssb"
        :OBDtotal="OBDtotal"
      ></a-large-screen-group>
    </div>
    <div class="two">
      <div class="btn-box">
        <el-radio-group v-model="radio1" fill="#ffffff33" text-color="#fff">
          <el-radio-button label="上一小时"></el-radio-button>
          <el-radio-button label="当日"></el-radio-button>
        </el-radio-group>
      </div>
      <template v-if="radio1 == '上一小时'">
        <b-large-screen-group
          :LeftTitle="LeftTitle[1]"
          color="now2"
          :images="IconImg2"
          :grouplist="syxs"
        ></b-large-screen-group>
      </template>
      <template v-if="radio1 == '当日'">
        <b-large-screen-group
          :LeftTitle="LeftTitle[2]"
          color="now3"
          :images="IconImg3"
          :grouplist="drsj"
        ></b-large-screen-group>
      </template>
    </div>
  </div>
</template>

<script>
import ALargeScreenGroup from "@/components/ALargeScreenGroup/ALargeScreenGroup";
import BLargeScreenGroup from "@/components/ALargeScreenGroup/BLargeScreenGroup";
import {
  getCarOBDCountCache,
  getCarLastHourCountCache,
  getCarDayCountsummaryToday,
  getCarCountsummaryLast5m,
} from "@/api/largescreen/index.js";

import IconImg1 from "@/assets/image/now-icon1.svg";
import IconImg2 from "@/assets/image/now-icon2.svg";
import IconImg3 from "@/assets/image/now-icon3.svg";
import { mapState } from "vuex";

let data = [
  { title: "实时车辆", smallTitle: "实时上报（辆）" },
  { title: "上一小时", smallTitle: "上一小时（辆）" },
  { title: "当日", smallTitle: "当日数据（辆）" },
];
export default {
  name: "actual",
  components: {
    ALargeScreenGroup,
    BLargeScreenGroup,
  },
  created() {},
  computed: {
    ...mapState(["map"]),
    adcode() {
      return this.map.adcode;
    },
  },
  data() {
    return {
      LeftTitle: [...data],
      /*左侧数据*/
      IconImg1,
      IconImg2,
      IconImg3,

      OBDtotal: "",
      sssb: {},
      syxs: {},
      drsj: {},
      /*切换按钮*/
      radio1: "上一小时",
    };
  },
  props: {
    /*css: {
      type: String,
      default: 'hide'
    },
    isOpen: {
      type: Boolean,
      default: true
    },*/
  },
  methods: {
    SSSB(id) {
      /*实时排放强度*/
      getCarCountsummaryLast5m({ cId: id })
        .then((res) => {
          this.sssb = res.data;
          let val1 = res.data.fuelTypes["柴油"];
          let val2 = res.data.total;
          let num = this.myfun.dataPercentage(val1, val2);
          this.$set(this.sssb, "cyPercentage", num);
          // console.log(this.sssb)
        })
        .catch((err) => {
          console.log(err);
        });
      getCarOBDCountCache()
        .then((res) => {
          this.OBDtotal = res.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    SYXS(id) {
      getCarLastHourCountCache({ cId: id })
        .then((res) => {
          this.syxs = res.data;
          let val1 = res.data.fuelTypes["柴油"];
          let val2 = res.data.total;
          let num = this.myfun.dataPercentage(val1, val2);
          this.$set(this.syxs, "cyPercentage", num);
          /*cyRatio
          trqRatio*/
        })
        .catch((err) => {
          console.log(err);
        });
    },
    DRSJ(id) {
      getCarDayCountsummaryToday({ cId: id })
        .then((res) => {
          this.drsj = res.data;
          let val1 = res.data.fuelTypes["柴油"];
          let val2 = res.data.total;
          let num = this.myfun.dataPercentage(val1, val2);
          this.$set(this.drsj, "cyPercentage", num);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  watch: {
    adcode: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        // console.log(newValue,oldValue)
        if (newValue == "120000") {
          let id = null;
          this.SSSB(id);
          this.SYXS(id);
          this.DRSJ(id);
        } else {
          this.SSSB(newValue);
          this.SYXS(newValue);
          this.DRSJ(newValue);
        }
      },
    },
  },
};
</script>

<style scoped lang="scss">
#actual {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 30px;
  position: relative;
  overflow: hidden;
  .one {
    width: 531px;
    box-sizing: border-box;
    overflow: hidden;
    margin-left: 33px;
  }

  .two {
    width: 531px;
    box-sizing: border-box;
    padding-top: 36px;
    overflow: hidden;
    margin-left: 33px;
    position: relative;
    .btn-box {
      position: absolute;
      right: 0px;
      top: 36px;
      height: 42px;
      overflow: hidden;
      box-sizing: border-box;
      border-image: linear-gradient(to right, #0c1b36, #203c53) 1 10;
      border-style: solid;
      border-width: 1px;
      ::v-deep .el-radio-group {
        height: 40px;
        overflow: hidden;
        .el-radio-button {
          height: 40px;
        }
      }
      ::v-deep .el-radio-button--medium .el-radio-button__inner {
        &:hover {
          color: #fff;
        }
        color: #bdd3df;
        height: 40px;
        padding: 13px 20px;
        background: transparent;
        border: none;
        border-radius: 0px;
        box-shadow: none;
      }
    }
  }
}
</style>
